<template>
	<div class="pre-order-detail">
		<div class="detail-top">
			<h3>{{ preOrderDetail.courseSnapshotName }}</h3>
			<p><span>合约编号：</span>{{ preOrderDetail.signCourseId }}</p>
			<p><span>授课教练：</span>{{ preOrderDetail.coachUserName }}</p>
			<p><span>课程模式：</span>{{ preOrderDetail.courseMode === 2 ? '1对2' : '1对1' }}</p>
			<p><span>会员：</span>{{ preOrderDetail.memberUserName }}</p>
			<p><span>预约方式：</span>{{ preOrderDetail.appointmentWay === 0 ? '教练代约' : '会员预约' }}</p>
			<p><span>上课时间：</span>{{ preOrderDetail.classStartTime }} - {{ preOrderDetail.classEndTime.split(' ')[1] }}</p>
			<p><span>签约状态：</span>{{ setAppointmentStatus(preOrderDetail.appointmentStatus)}}</p>
		</div>
		<div class="detail-middle"></div>
		<div class="detail-bottom">
			<p class="bottom-title">课程核销码</p>
			<p class="bottom-img">
				<!-- <canvas type="2d" id="myCanvas" canvas-id="myCanvas" style="width: 300rpx;height: 300rpx;"></canvas> -->
				<canvas id="qrcode" canvas-id="qrcode" style="width: 100px;height: 100px;"></canvas>
			</p>
			<p>销课方式：<em>{{ getAppointmentWriteOffWay(preOrderDetail.writeOffWay) }}</em></p>
		</div>
		<div class="footer fix-footer" v-if="setAppointmentStatus(preOrderDetail.appointmentStatus) === '已预约'">
			<span class="pre-step" @click="disAppointment">取消预约</span>
			<span class="pre-step" @click="writeOffAppointment" v-if="userInfo.roleCode == 'ADMIN'">核销签课</span>
		</div>
		<div class="footer fix-footer1" v-if="setAppointmentStatus(preOrderDetail.appointmentStatus) === '已完成'">
			<span class="pre-step" @click="appointmentCancel" v-if="userInfo.roleCode == 'ADMIN' || userInfo.roleCode == 'STORE_LEADER'">作废</span>
		</div>
	</div>
</template>

<script>
import {getStore, setStore} from '@/util/service'
import { mapGetters } from 'vuex'
import { disAppointment, writeOffAppointment, appointmentCancel } from '@/api/manageApi'
import {baseServer} from '@/config/config'
import UQRCode from 'uqrcodejs'
export default {
	data() {
		return {
			scrollHeight: 200,
			scrollLeft: 0,
			preOrderDetail: {classEndTime: ''},
			qrCodeData: '',
			qr: null
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken'])
	},
	onLoad() {
		uni.showLoading({
      title: '加载中'
    })
		var preOrderDetail = JSON.parse(getStore('preOrderDetail'))
		this.preOrderDetail = preOrderDetail
		console.log(preOrderDetail)
		this.createQRCode()
	},
	methods: {
		createQRCode () {
			// 获取uQRCode实例
			var qr = null
			qr = new UQRCode();
			// 设置二维码内容
			qr.data =  baseServer + '/' + this.preOrderDetail.id
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = 100;
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
			uni.hideLoading()
		},
		setAppointmentStatus (val) {
      if (val === -1) {
        return '已作废'
      } else if (val === 0) {
        return '已预约'
      } else if (val === 1) {
        return '已完成'
      } else if (val === 2) {
        return '会员取消'
      } else if (val === 3) {
        return '教练取消'
      }
    },
		getAppointmentWriteOffWay (val) {
			if(val === 0){
				return '后台核销'
			}else if(val === 1) {
				return '会员扫码'
			}else if(val === 2) {
				return '门禁核销'
			}else{
				return ''
			}
		},
		// 取消预约
    disAppointment () {
			this.uShowModel('确认', '确定要取消吗', () => {
				var params = {
					id: this.preOrderDetail.id
				}
				disAppointment(params).then(res => {
					this.uShowToast(res.msg)
					this.goBackUrl()
				})
			})
    },
		// 手动核销
		writeOffAppointment () {
			this.uShowModel('确认', '确定要核销签课吗', () => {
				var params = {
					id: this.preOrderDetail.id
				}
				writeOffAppointment(params).then(res => {
					this.uShowToast(res.msg)
					this.goBackUrl()
				})
			})
		},
		//作废
		appointmentCancel () {
			this.uShowModel('确认', '确定要作废吗', () => {
				var params = {
					id: this.preOrderDetail.id
				}
				appointmentCancel(params).then(res => {
					this.uShowToast(res.msg)
					this.goBackUrl()
				})
			})
		}
	}
}
</script>

<style lang="scss">
.pre-order-detail {
	width: 702rpx;
	margin: 24rpx auto;
	padding-bottom: 200rpx;
	.detail-top{
		height: 648rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 44rpx;
		box-sizing: border-box;
		h3{
			font-size: 32rpx;
			color: #1E1E1E;
			margin-bottom: 30rpx;
		}
		p{
			line-height: 58rpx;
			display: flex;
		}
		span{
			width: 150rpx;
			display: inline-block;
			margin-right: 49rpx;
			font-size: 28rpx;
			color: #838383;
		}
		em{
			font-size: 28rpx;
			color: #1E1E1E;
		}
	}
	.detail-middle{
		width: 702rpx;
		height: 48rpx;
		background: url('../static/p1.png') no-repeat 0 0;
		background-size: cover;
	}
	.detail-bottom{
		background: #fff;
		padding: 43rpx;
		p {
			margin-bottom: 48rpx;
			font-size: 28rpx;
			color: #838383;
			display: flex;
			img{
				width: 301rpx;
				height: 301rpx;
			}
			em{
				font-size: 28rpx;
				color: #1E1E1E;
				margin-left: 41rpx;
			}
		}
		.bottom-title{
			margin-bottom: 23rpx;
		}
		.bottom-img{
			justify-content: center;
			text-align: center;
		}
	}
	.fix-footer{
		padding-top: 20rpx;
		box-sizing: border-box;
	}
	.fix-footer1{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.footer{
    width: 750rpx;
    height: 128rpx;
    background: #FFFFFF;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0rpx;
    span{
      margin-top: 24rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      display: inline-block;
      border-radius: 40rpx;
      background: #FF5D3D;
      font-size: 32rpx;
      color: #FFFFFF;
    }
    .next{
      width: 646rpx;
    }
    .pre-step{
      width: 328rpx;
      background: #FFFFFF;
      border: 1px solid #FF5A20;
      color: #FF5A20;
      margin: 0 10rpx;
    }
    .next-step{
      width: 328rpx;
    }
  }
}
</style>
